<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>
<body>
<div class="a">动画</div>
<div class="b">动画2号</div>
<div class="c">动画3号</div>
<style>
    @keyframes c {
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
    }
    .c{
        animation: c 1s linear 2s infinite alternate;
        position: absolute;
    }
    @keyframes b {
        0%{
            background-color: red;
        }
        25%{background-color: yellow}
        50%{background-color: blue}
        100%{background-color: green}
    }
    .b{
        animation: b 10s;
    }
    div{
        padding: 100px;
        text-align: center;
    }
    @keyframes one {
        from{background-color: red}
        to{
            background-color: yellow;
        }
    }
    .a{
        animation: one 5s;
    }
</style>
</body>
</html>